<template>
  <div class="order">
    <a-card title="excel预览">
      <vxe-table
        v-if="tabelList"
        ref="tableRef"
        :data="tabelList"
        size="mini"
        show-footer
        :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
        :column-config="{ isCurrent: true, resizable: true }"
        :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        stripe
        border
        @menu-click="contextMenuBodyClickEvent"
      >
        <vxe-column field="requisitionType" title="销售单号" width="120" align="center">
          <template #default="{ row }"> {{ row.saleOrderId }}</template>
        </vxe-column>
        <vxe-column field="requisitionNo" width="100" title="订单日期" align="center">
          <template #default="{ row }"> {{ row.orderDate }}</template>
        </vxe-column>
        <vxe-column field="requisitionNo" width="100" title="客户订单" align="center">
          <template #default="{ row }"> {{ row.customOrder }}</template>
        </vxe-column>
        <vxe-column field="requisitionNumber" width="100" title="客户订单日期" align="center">
          <template #default="{ row }"> {{ row.customOrderDate }}</template>
        </vxe-column>
        <vxe-column field="productNumber" width="100" title="客户" align="center">
          <template #default="{ row }"> {{ row.customId }}</template>
        </vxe-column>
        <vxe-column field="productName" width="100" title="币别" align="center">
          <template #default="{ row }"> {{ row.coinType }}</template>
        </vxe-column>
        <vxe-column field="specifications" width="100" title="订单汇率" align="center">
          <template #default="{ row }"> {{ row.order0ExchangeRate }}</template>
        </vxe-column>
        <vxe-column field="supplierName" width="100" title="税别" align="center">
          <template #default="{ row }"> {{ row.taxType }}</template>
        </vxe-column>
        <vxe-column field="supplierName" width="100" title="单价含税" align="center">
          <template #default="{ row }"> {{ row.unitPriceIncludesTax }}</template>
        </vxe-column>
        <vxe-column field="number" width="100" title="业务员" align="center">
          <template #default="{ row }"> {{ row.salesMan }}</template>
        </vxe-column>
        <vxe-column field="unitPrice" width="100" title="销售部门" align="center">
          <template #default="{ row }"> {{ row.salesDepartment }}</template>
        </vxe-column>
        <vxe-column field="unit" width="100" title="付款条件" align="center">
          <template #default="{ row }"> {{ row.paymentTerms }}</template>
        </vxe-column>
        <vxe-column field="totalAmount" width="140" title="送货地址" align="center">
          <template #default="{ row }"> {{ row.shippingAddress }}</template>
        </vxe-column>
        <vxe-column field="purchasedQuantity" width="100" title="发票地址" align="center">
          <template #default="{ row }"> {{ row.invoiceAddress }}</template>
        </vxe-column>
        <vxe-column field="purchaserName" width="100" title="发票类型" w align="center">
          <template #default="{ row }"> {{ row.invoiceType }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="140" title="交易条件" align="center">
          <template #default="{ row }"> {{ row.transactionTerms }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="专案名称" show-oerflow align="center">
          <template #default="{ row }"> {{ row.projectName }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="100" title="唛头" align="center">
          <template #default="{ row }"> {{ row.mark }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="100" title="供应链订单" align="center">
          <template #default="{ row }"> {{ row.supplyChainOrder }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="分次开票" align="center">
          <template #default="{ row }"> {{ row.invoicingInInstallments }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="600" title="备注" align="center">
          <template #default="{ row }"> {{ row.headRemark }}</template>
        </vxe-column>
        <vxe-column field="totalAmount" width="100" title="NO" align="center">
          <template #default="{ row }"> {{ row.no }}</template>
        </vxe-column>
        <vxe-column field="purchasedQuantity" width="150" title="商品" align="center">
          <template #default="{ row }"> {{ row.commodity }}</template>
        </vxe-column>
        <vxe-column field="purchaserName" width="100" title="客户商品" align="center">
          <template #default="{ row }"> {{ row.customerMerchandise }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="100" title="单位" align="center">
          <template #default="{ row }"> {{ row.unit }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="数量" align="center">
          <template #default="{ row }"> {{ row.amount }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="100" title="单价" align="center">
          <template #default="{ row }"> {{ row.unitPrice }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="100" title="预定交货日" align="center">
          <template #default="{ row }"> {{ row.scheduledDeliveryDate }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="运送方式" align="center">
          <template #default="{ row }"> {{ row.shippingMethod }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="100" title="仓库" align="center">
          <template #default="{ row }"> {{ row.storehouse }}</template>
        </vxe-column>
        <vxe-column field="totalAmount" width="100" title="销售/代工" align="center">
          <template #default="{ row }"> {{ row.salesOEM }}</template>
        </vxe-column>
        <vxe-column field="purchasedQuantity" width="100" title="生管确定日" align="center">
          <template #default="{ row }"> {{ row.productionManagementConfirmationDate }}</template>
        </vxe-column>
        <vxe-column field="purchaserName" width="600" title="备注" align="center">
          <template #default="{ row }"> {{ row.singleNotes }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="100" title="供应链流程" align="center">
          <template #default="{ row }"> {{ row.supplyChainProcess }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="备品" align="center">
          <template #default="{ row }"> {{ row.spareParts }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="100" title="使用报税材料" align="center">
          <template #default="{ row }"> {{ row.useBondedMaterials }}</template>
        </vxe-column>
        <vxe-column field="requirementDate" width="100" title="分配" align="center">
          <template #default="{ row }"> {{ row.branchFactory }}</template>
        </vxe-column>
        <vxe-column field="time" width="100" title="销售去向" align="center">
          <template #default="{ row }"> {{ row.salesDestination }}</template>
        </vxe-column>
        <vxe-column field="deliveryDate" width="100" title="保税" align="center">
          <template #default="{ row }"> {{ row.bonded }}</template>
        </vxe-column>
      </vxe-table>
      <div class="formHeader-criteria-postizz">
        <a-button type="primary" @click="goBack">返回</a-button>
      </div>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './excelPreview.ts';
import { EFTimeFormatConversion, isNullPm } from '@/utils/baseMethods';

export default defineComponent({
  name: 'OrderDom',
  setup() {
    const { base, menuConfig, contextMenuBodyClickEvent, goBack } = importConfig();

    return {
      ...toRefs(base),
      menuConfig,
      contextMenuBodyClickEvent,
      isNullPm,
      goBack,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }

  &-bomxa {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
  &-pimasn {
    width: 300px;
    &-onminc {
      display: block;
      padding-bottom: 10px;
    }
  }
}
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;
  }
}
.itemoption {
  font-size: 12px;
  color: #999;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  &-aspanasm {
    font-size: 14px;
    font-weight: 900;
    color: #3d528b;
    padding-left: 10px;
  }
  &-ioasdoasn {
    width: 300px;
    display: inline-block;
    white-space: normal;
  }
}
</style>
